<template>
  <div class="wrapper_new wrapper_l">
    <div id="head" class="s_form s_form_login ">
      <div id="head_wrapper" class="s-isindex-wrap head_wrapper s-title-img">
        <div id="s_fm" class="s_form s_form_login ">
          <div class="s_form_wrapper soutu-env-nomac" id="s_form_wrapper">
            <Row>
              <Col>
                <a href="/" id="result_logo" onmousedown="return c({'fm':'tab','tab':'logo'})">
                  <img class="index-logo-src"
                       src="https://pec-1300659502.cos.ap-guangzhou.myqcloud.com/logoResult.png"
                       alt="到图云首页"
                       title="到图云首页"
                  >
                </a>
              </Col>
              <Col style="z-index: 2000">
                <form id="form" class="fm  has-soutu">
                  <span id="s_kw_wrap" class="bg s_ipt_wr new-pmd quickdelete-wrap">
                    <Input v-model="searchForm.searchWord" search enter-button @on-change="changeKeyWord" id="kw"/>
                  </span>
                </form>
                <div class="bdsug bdsug-new bdsugbg" v-show="showSugBox">
                  <ul>
                    <li v-for="(item,index) in keyWordList" :key="index" class="bdsug-overflow"
                        @click="clickSearch(item)">{{item}}
                    </li>
                  </ul>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>

    <Row :gutter="24">
      <!--搜索列表-->
      <Col :span="10" style="">
        <div style="width: 80%;margin-left: 15%">
          <div>
            <span>图云共为你找到{{pageItem.pageTotal}}个数据</span>
          </div>
          <div class="_8m8a62j fc-9c1fe2760002e1a3 _8m8a62j EC_result new-pmd c-container" style="margin-top: 20px">
            <div style="display:block !important;visibility:visible !important;">
              <div class="c-row">
                <div class="c-span12 c-span-last" v-for="(item,index) in resultList" :key="index" style="margin-bottom: 20px">
                  <div class="c-gap-bottom-mini">
                    <h3 class="t ec_title _3qzdx3r c-title t t tts-title">
                      <div class="wbrjf67">
                        <a href="" target="_blank"
                           style="display: inline !important; visibility: visible !important;font-size: 19px"
                           v-html="item.question.subject">
                        </a>
                      </div>
                    </h3>
                  </div>
                  <div>
                    <div class="x59v23c c-abstract">
                      <a href="" target="_blank">
                        <div class="ec_desc">
                          <span>
                            <Tag v-show="item.question.type === 1" color="green">单选题</Tag>
                            <Tag v-show="item.question.type === 2" color="green">多选题</Tag>
                            <Tag v-show="item.question.type === 4" color="green">填空题</Tag>
                            <Tag v-show="item.question.type === 5" color="green">解答题</Tag>
                            <Tag v-show="item.question.difficulty === 0" color="cyan">简单题</Tag>
                            <Tag v-show="item.question.difficulty === 1" color="cyan">一般题</Tag>
                            <Tag v-show="item.question.difficulty === 2" color="cyan">困难题</Tag>
                            <Tag v-show="item.question.isFrequency === 1" color="blue">高频考点</Tag>
                          </span>
                          <span v-html="item.question.analysis"></span>
                          <span v-show="item.question.type === 1 || item.question.type === 2">
                            <strong>选项: </strong><br>
                            <span v-for="(questionItem,index) in item.questionItemList" :key="index">
                              <span v-if="questionItem.questionItemContent !== ''">
                                {{choiceList[index]}}.{{questionItem.questionItemContent}}<br>
                              </span>
                            </span>
                          </span>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="c-row source_1Vdff OP_LOG_LINK c-gap-top-xsmall source_s_3aixw">
                    <a href="" target="_blank" class="siteLink_9TPP3" aria-hidden="false" tabindex="0" aria-label
                       style="text-decoration: none">
                      <span class="c-color-gray" aria-hidden="true" v-html="item.question.courseName"></span>
                    </a>
                  </div>
                </div>
                <div class="c-span12 c-span-last" style="margin-top: 30px">
                  <Page :total="pageItem.pageTotal" @on-change="changePage" show-elevator/>
                </div>
              </div>

            </div>
          </div>
        </div>
      </Col>
      <!--相关数据-->
      <Col :span="6" style="">
        <Card :bordered="false" style="margin-top: 20px">
          <p slot="title">相关课程</p>
          <div>
            <Row :gutter="24" v-for="item in courseList" :key="item.courseId" style="margin-top: 20px">
              <Col :span="6">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="host + item.image"
                  fit="scale-down">
                </el-image>
              </Col>
              <Col :span="18">
                <h3>{{item.courseName}}</h3>
                <p v-if="item.courseArticle.length < 80">{{item.courseArticle}}</p>
                <p v-else>{{item.courseArticle.substr(0,80)}}...</p>
              </Col>
            </Row>
          </div>
        </Card>
        <Card :bordered="false" style="margin-top: 20px">
          <p slot="title">相关知识点</p>
          <div>
            <Tag color="#FFA2D3" size="large" v-for="(item,index) in questionTagList" :key="index">{{item}}</Tag>
          </div>
        </Card>
        <Card :bordered="false" style="margin-top: 20px">
          <p slot="title">热点数据</p>

        </Card>
      </Col>
      <!--知识图谱展示-->
      <Col :span="8" style="">
        <Card style="margin-top: 20px">
          <p slot="title">
            <Icon type="md-analytics"/>
            知识图谱展示
          </p>
          <div id="viz" style="height: 600px">

          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>

  import { getSearchResult, getGraphConfig,getSuggest } from '@/api/userApi'
  import { NEO4J_HOST } from '@/constants/hostCommon'

  export default {
    name: 'SearchResult',
    data () {
      return {
        labelsConfig: {},
        keyWordList: [],
        showSugBox: false,
        pageItem: {
          pageTotal: 0
        },
        relationshipsConfig: {},
        cypher: '',
        host: 'https://cdn.yxinmiracle.com',
        resultList: [],
        questionTagList: [],
        courseList: [],
        searchForm: {
          searchWord: '',
          idx: ''
        },
        choiceList: [
          'A', 'B', 'C', 'D', 'E', 'F'
        ]
      }
    },
    methods: {
      changePage (page) {
        console.log(page)
      },
      search () {
        getSearchResult(this.searchForm.searchWord, this.searchForm.idx).then(response => {
          if (response.code === 200) {
            this.resultList = response.data.questionList
            this.questionTagList = response.data.questionTagList
            this.courseList = response.data.coursesList
            this.cypher = response.data.cypher.replace('\\', '')
            this.pageItem.pageTotal = response.total
            this.draw()
          }
          if (response.code === 201){
            this.$Message.warning('并无数据展示');
          }
        })
      },
      draw () {
        var config = {
          container_id: 'viz',
          server_url: NEO4J_HOST,
          server_user: 'neo4j',
          server_password: 'password',
          labels: this.labelsConfig,
          relationships: this.relationshipsConfig,
          // initial_cypher: this.cypher
          initial_cypher: this.cypher
        }
        var viz = new NeoVis.default(config)
        viz.render()
      },
      readyNeovisJs () {
        let that = this
        let arr = ['./neovis.js']
        arr.map((item) => {
          let script = document.createElement('script')
          script.type = 'text/javascript'
          script.src = item
          document.getElementsByTagName('body')[0].appendChild(script)
          script.onload = function () {
            that.getNeo4jConfig()
          }
        })
      },
      getNeo4jConfig () {
        getGraphConfig().then(response => {
          if (response.code === 200) {
            const configData = response.data
            this.labelsConfig = configData.labels
            this.relationshipsConfig = configData.relationships
            this.search()
          }
        })
      },
      getUrlKey (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
      },
      changeKeyWord () {
        if (this.searchForm.searchWord.length === 0) {
          this.keyWordList = []
          return
        }
        getSuggest(this.searchForm.searchWord).then(response => {
          if (response.code === 200) {
            this.keyWordList = []
            this.keyWordList = response.data
          }
        })
      },
      clickSearch (keyword) {
        this.$router.push({
          path: '/search/s/result',
          query: {
            keyword: keyword,
            idx: 1
          }
        })
      }
    },
    created () {
      // this.search()
      let keyword = this.getUrlKey('keyword')
      if (keyword === null) {
        window.location.href = 'http://localhost:8080/#/search'
        return
      }
      let idx = this.getUrlKey('idx') === null ? 1 : this.getUrlKey('idx')
      this.searchForm.searchWord = keyword
      this.searchForm.idx = idx
      this.readyNeovisJs()
    },
    watch: {
      $route(to, from) {
        console.log(to)
        console.log(from)
        if (this.$route.query.keyword === null) {
          window.location.href = 'http://localhost:8080/#/search'
          return
        }else {
          let idx = this.$route.query.idx === null ? 1 : this.getUrlKey('idx')
          this.searchForm.searchWord = this.$route.query.keyword
          this.searchForm.idx = this.$route.query.idx
          this.readyNeovisJs()
        }
      }
    },
  }
</script>

<style scoped>
  #head {
    border-bottom: 0;
    min-width: 1060px;
  }

  #head .head_wrapper {
    _width: 1000px;
  }

  #head .head_wrapper {
    display: block;
    padding-top: 0 !important;
  }

  .s-isindex-wrap {
    display: none;
  }

  .wrapper_new .s_form {
    height: 70px;
    padding-left: 16px;
  }

  .s_form {
    zoom: 1;
    height: 55px;
    padding: 0 0 0 10px;
  }

  #result_logo {
    margin: 17px 0 0;
  }

  #result_logo {
    float: left;
    margin: 13px 0 0;
  }

  a {
    color: #2440b3;
    text-decoration: none;
  }

  a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
  }

  #result_logo img {
    width: 101px;
    height: 33px;
  }

  table, img {
    border: 0;
  }

  .wrapper_new .fm {
    margin: 15px 0 15px 16px;
  }

  .fm {
    clear: none;
    float: left;
    margin: 11px 0 0 10px;
  }

  .fm {
    clear: both;
    position: relative;
    z-index: 297;
  }

  p, form, ol, ul, li, dl, dt, dd, h3 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  form {
    display: block;
    margin-top: 0em;
  }

  .wrapper_new .s_ipt_wr {
    width: 590px;
    height: 36px;
    border: 2px solid #c4c7ce;
    border-radius: 10px 0 0 10px;
    border-right: 0;
    overflow: visible;
  }

  .s_ipt_wr.bg, .s_btn_wr.bg, #su.bg {
    background-image: none;
  }

  .quickdelete-wrap {
    position: relative;
  }

  .s_ipt_wr {
    border: 1px solid #b6b6b6;
    border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    width: 539px;
    margin-right: 0;
    border-right-width: 0;
    border-color: #b8b8b8 transparent #ccc #b8b8b8;
    overflow: hidden;
  }

  .new-pmd {
  }

  .s_ipt_wr {
    height: 32px;
  }

  .s_ipt_wr {
    width: 536px;
    height: 30px;
    display: inline-block;
    margin-right: 5px;
    background-position: 0 -96px;
    border: 1px solid #b6b6b6;
    border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
    vertical-align: top;
  }

  #kw {
    position: relative;
  }

  .new-pmd.c-container {
    width: 560px;
    word-wrap: break-word;
    word-break: break-all;
    color: #333;
    font-size: 13px;
    line-height: 21px;
  }

  ._8m8a62j {
    margin-bottom: 22px;
  }

  .new-pmd .c-span-last {
    margin-right: 0;
  }

  .new-pmd .c-span2, .new-pmd .c-span3, .new-pmd .c-span4, .new-pmd .c-span5, .new-pmd .c-span6, .new-pmd .c-span7, .new-pmd .c-span8, .new-pmd .c-span9, .new-pmd .c-span10, .new-pmd .c-span11, .new-pmd .c-span12 {
    float: left;
    _display: inline;
    margin-right: 16px;
    list-style: none;
  }

  .new-pmd .c-span12 {
    width: 560px;
  }

  .c-span-last {
    margin-right: 0;
  }

  .new-pmd .c-gap-bottom-mini {
    margin-bottom: 2px;
  }

  #container.sam_newgrid .c-container .t, #container.sam_newgrid .c-container .c-title {
    font-size: 22px;
    line-height: 22px;
  }

  #container.sam_newgrid .c-container .t, #container.sam_newgrid .c-container .c-title {
    margin-bottom: 4px;
  }

  .c-container .t, .c-default .t {
    line-height: 1.54;
  }

  h3._3qzdx3r {
    line-height: 25px !important;
    margin-bottom: 3px !important;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
  }

  .t {
    font-weight: 400;
    font-size: medium;
    margin-bottom: 1px;
  }

  p, form, ol, ul, li, dl, dt, dd, h3 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  h3._3qzdx3r > div {
    text-overflow: clip;
  }

  h3._3qzdx3r div {
    max-height: 25px;
  }

  .wbrjf67 {
    max-height: 21px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  h3._3qzdx3r a {
    max-width: 100%;
  }

  a {
    color: #2440b3;
    text-decoration: none;
  }

  .new-pmd .c-abstract {
    font: 13px/21px Arial, sans-serif;
    color: #222;
  }

  .x59v23c {
    margin-bottom: 2px;
  }

  .c-abstract {
    font-size: 13px;
  }


  .x59v23c a {
    text-decoration: none;
    color: #444;
  }

  a {
    color: #2440b3;
    text-decoration: none;
  }

  .wbrjf67 a:hover {
    color: #00aeec;
  }

  .wbrjf67 a:visited {
    color: #4e6bdb;
  }

  .new-pmd .c-gap-top-xsmall {
    margin-top: 4px;
  }

  .new-pmd .c-color-gray {
    color: #626675;
  }

  img {
    border: 0;
  }

  .bdsug-new {
    width: 590px;
    top: 31px;
    border-radius: 0 0 10px 10px;
    border: 3px solid #c4c7ce;
    border-top: 0 !important;
    box-shadow: none;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    z-index: 1;
  }

  .bdsug-new ul {
    margin: 7px 14px 0;
    padding: 8px 0 7px;
    background: 0 0;
    border-top: 2px solid #f5f5f6;
  }

  .bdsug li {
    width: 515px;
    color: #000;
    font: 14px arial;
    line-height: 22px;
    padding: 0 8px;
    position: relative;
    cursor: default;
  }

  .bdsug-overflow {
    margin-top: 5px;
  }

  .bdsug-overflow:hover {
    background-color: rgba(211, 242, 252, 0.91);
    cursor: pointer;
  }

  .wrapper_new #form .bdsug-new {
    width: 590px;
    top: 31px;
    border-radius: 0 0 10px 10px;
    border: 2px solid #4e71f2 !important;
    border-top: 0 !important;
    box-shadow: none;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    z-index: 1;
  }

  .bdsug {
    width: 540px;
    background: #fff;
    border: 1px solid #ccc;
    _overflow: hidden;
    box-shadow: 1px 1px 3px #ededed;
    -webkit-box-shadow: 1px 1px 3px #ededed;
    -moz-box-shadow: 1px 1px 3px #ededed;
    -o-box-shadow: 1px 1px 3px #ededed;
    margin-top: 45px;
    margin-left: 17px;
  }

  p, form, ol, ul, li, dl, dt, dd, h3 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
</style>
